<template>
  <div class="app-container">
    <el-row :style="{ marginBottom: '10px' }">
      <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新建救援计划</el-button>
    </el-row>
    <el-row>
      <el-table :data="list">
        <el-table-column label="救援计划标题" prop="name" />
        <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
        <el-table-column label="事件信息" align="center" prop="planDate" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="text" v-if="scope.row.saveInfoId" @click="handleEventDetail(scope.row)">事件详情</el-button>
            <el-button size="mini" type="text" v-else @click="handleEventSet(scope.row)">补充事件信息</el-button>
          </template>
        </el-table-column>
        <el-table-column label="总指挥" align="center" prop="planDate" width="180">
          <template slot-scope="scope">
            <LeaderSet ref="leaderSetRef" :leader="scope.row.userName" :id="scope.row.hdInfoId" @handleOk="getList" />
          </template>
        </el-table-column>
        <el-table-column label="应急预案" align="center" prop="planName" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.planName == null" :style="{ color: '#A8A8A8' }">未选择预案</span>
            <span v-else>{{ scope.row.planName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="响应级别" align="center" prop="createTime" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.responseLevel == null" :style="{ color: '#A8A8A8' }">未选择响应级别</span>
            <span v-else>{{ responseLevelOption[scope.row.responseLevel - 1].label }}</span>
          </template>
        </el-table-column>
        <el-table-column label="处置状态" align="center" prop="status">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" size="mini">待处置</el-tag>
            <el-tag type="warning" v-if="scope.row.status == 1" size="mini">处置中</el-tag>
            <el-tag type="success" v-if="scope.row.status == 2" size="mini">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="290">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleEdit(scope.row)">修改</el-button>
            <template v-if="scope.row.status == 0">
              <el-button size="mini" type="text" @click="handleExecute(scope.row)">立即处置</el-button>
            </template>
            <template v-if="scope.row.status == 1">
              <el-button size="mini" type="text" @click="handleExcuteDetail(scope.row)">处置详情</el-button>
            </template>
            <template v-if="scope.row.status == 2">
              <el-button size="mini" type="text" @click="handlePlayBack(scope.row)">过程回看</el-button>
              <el-button size="mini" type="text" @click="handleReport(scope.row)">处置总结</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    <event-handle ref="eventHandle" @onHandleStared="onEventHandled" />
    <handle-picker ref="handlePicker" @onSelected="handleHandleSelected" key="playback" type="playback" />
    <handle-picker ref="reportHandlePicker" @onSelected="handleReportHandleSelected" key="report" type="report" />
    <plan-edit ref="planEdit" @handleOk="getList" />
    <plan-event-detail ref="planEventDetail" @onEdit="handleEventEdit" />
    <plan-event-edit ref="planEventEdit" @handleOk="getList" />
  </div>
</template>

<script>
import * as HandleApi from "@/api/response/handle.js";
import EventHandle from "./components/EventHandle.vue";
import PlanEventDetail from "./components/PlanEventDetail.vue";
import PlanEventEdit from "./components/PlanEventEdit.vue";
import HandlePicker from "./components/HandlePicker.vue";
import PlanEdit from "./components/PlanEdit.vue";
import LeaderSet from "./module/LeaderSet.vue";
import * as Auth from "@/utils/auth";

export default {
  name: "HandleList",
  components: { EventHandle, HandlePicker, PlanEdit, PlanEventEdit, PlanEventDetail, LeaderSet },
  dicts: ["usetypecode_dict", "eventlevelcode_dict", "info_report_channel"],
  data() {
    return {
      list: [],
      // 分页
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      userId: 0,
      responseLevelOption: [
        {
          label: "Ⅰ级响应",
          value: 1,
        },
        {
          label: "Ⅱ级响应",
          value: 2,
        },
        {
          label: "Ⅲ级响应",
          value: 3,
        },
        {
          label: "Ⅳ级响应",
          value: 4,
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.userId = Auth.getUserId();
    console.log(this.userId);
    this.queryParams.userId = this.userId;
    this.getList();
  },
  methods: {
    getList() {
      HandleApi.handleEventList(this.queryParams).then(res => {
        console.log(res);
        this.list = res.rows;
        this.total = res.total;
      });
    },
    handleAdd() {
      this.$refs.planEdit.add();
    },
    handleEdit(data) {
      this.$refs.planEdit.edit({ hdInfoId: data.hdInfoId, name: data.name });
    },
    // 补充应急事件详情
    handleEventSet(data) {
      this.$refs.planEventEdit.add(data.hdInfoId);
    },
    // 应急事件详情
    handleEventDetail(data) {
      this.$refs.planEventDetail.showDetail(data.saveInfoId);
    },
    handleEventEdit(data) {
      this.$refs.planEventEdit.edit(data);
    },
    handleExcuteDetail(data) {
      this.$tab.openPage("处置详情", "/response/detail", { hdInfoId: data.hdInfoId });
    },
    handlePlayBack(data) {
      this.$refs.handlePicker.showDialog(data.hdInfoId);
    },
    handleReport(data) {
      this.$refs.reportHandlePicker.showDialog(data.hdInfoId);
    },
    onEventHandled() {
      // 处置成功
      this.getList();
    },
    handleExecute(data) {
      this.$refs.eventHandle.showDialog(data);
    },
    handleHandleSelected(handleId) {
      this.$tab.openPage("过程回看", "/rate/handle/playback", { handleId: handleId });
    },
    handleReportHandleSelected(handleId) {
      this.$tab.openPage("处置总结", "/rate/report", { handleId: handleId });
    },
  },
};
</script>

<style scoped lang="scss"></style>
